﻿<template>
    <el-container>
        <el-main>
            <el-form ref="form"
                     :model="data"
                     :rules="formRules"
                     label-width="80px">

                <el-form-item label="角色"
                              prop="roleId">
                    <el-select v-model="data.roleNames"
                               multiple
                               placeholder="请选择"
                               style="width:100%;">
                        <el-option v-for="item in editRoles"
                                   :key="item.id"
                                   :label="item.name"
                                   :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="用户名称"
                              prop="userName">
                    <el-input v-model="data.userName"></el-input>
                </el-form-item>


                <el-form-item label="名"
                              prop="name">
                    <el-input v-model="data.name"></el-input>
                </el-form-item>

                <el-form-item label="姓"
                              prop="surname">
                    <el-input v-model="data.surname"></el-input>
                </el-form-item>

                <el-form-item label="密码"
                              prop="password">
                    <el-input v-model="data.password"></el-input>
                </el-form-item>

                <el-form-item label="邮箱地址"
                              prop="email">
                    <el-input v-model="data.email"
                              type="email"></el-input>
                </el-form-item>

                <el-form-item label="手机号码"
                              prop="phoneNumber">
                    <el-input v-model="data.phoneNumber"
                              type="tel"></el-input>
                </el-form-item>

            </el-form>
        </el-main>
        <el-footer style="text-align:right;">
            <el-button @click="$emit('cancel')">取消</el-button>
            <el-button type="primary" @click="onSave">保存</el-button>
        </el-footer>
    </el-container>
</template>

<script>
    export default {
        props: ['id'],
        data() {
            return {
                data: {},
                formRules: {
                    userName: [
                        { required: true, message: '请输入用户名称', trigger: 'blur' }
                    ],
                    newPassword: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                    ],
                    phoneNumber: [
                    ]
                },
                editRole: [],
                editRoles: [],
            }
        },
        mounted() {
            var self = this;
            self.refresh(self.id);
        },
        methods: {
            refresh() {
                var self = this;
                self.getRoles(self.id);
            },
            getRoles(id) {
                var self = this;
                self.$http
                    .get('/api/identity/roles')
                    .then((res) => {
                        self.editRoles = res.items;
                        self.getUserInfo(id);


                    });
            },

            getUserInfo(id) {
                var self = this;
                if (id === '') {
                    self.data = {
                        password: '',
                        concurrencyStamp: '',
                        userName: '',
                        name: '',
                        surname: '',
                        email: '',
                        phoneNumber: '',
                        twoFactorEnabled: true,
                        lockoutEnabled: true,
                        roleNames: []
                    };
                    return;
                }
                self.$http
                    .get('/api/identity/users/' + id)
                    .then((res) => {
                        self.data = {
                            password: res.password,
                            concurrencyStamp: res.concurrencyStamp,
                            userName: res.userName,
                            name: res.name,
                            surname: res.surname,
                            email: res.email,
                            phoneNumber: res.phoneNumber,
                            twoFactorEnabled: res.twoFactorEnabled,
                            lockoutEnabled: res.lockoutEnabled,
                            roleNames: []
                        };

                        self.getUserRoles(id);
                    });
            },

            getUserRoles(id) {
                var self = this;
                self.editRole = [];
                if (id === '') {
                    return;
                }

                self.$http
                    .get('/api/identity/users/' + id + '/roles')
                    .then((res) => {
                        for (var i in res.items) {
                            var item = res.items[i];
                            self.data.roleNames.push(item.name);
                        }
                    });
            },
            onSave() {
                var self = this;
                self.$refs.form.validate((valid) => {
                    if (valid) {
                        if (self.id === '') {
                            self.$http
                                .post('/api/identity/users/', self.data)
                                .then(onSaveSuccess)
                                .catch(onSaveError);
                        } else {
                            self.$http
                                .put('/api/identity/users/' + self.id, self.data)
                                .then(onSaveSuccess)
                                .catch(onSaveError);
                        }
                    } else {
                        return false;
                    }
                });

                function onSaveSuccess(res) {
                    self.$emit("change", res);
                }
                function onSaveError(error) {
                    var _error = error.response.data.error;
                    var msg = _error.message;
                    if (_error.details !== null) {
                        msg += '\n' + _error.details;
                    }

                    self.$message({
                        message: msg,
                        type: 'error'
                    });
                }
            },

        }
    }
</script>

<style scoped>
</style>